<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header(~{::title},~{},~{})">
    <title>用户列表</title>
</head>
<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar d-flex flex-column flex-md-row">
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
                        <a class="btn btn-success m-r-5 ajax-post confirm" href="http://www.lyear.com/doc_test.php" target-form="ids"><i class="mdi mdi-check"></i> 启用</a>
                        <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
                        <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                    </div>

                    <form class="search-bar ml-md-auto" method="get" action="#!" role="form">
                        <input type="hidden" name="search_field" id="search-field" value="title" />
                        <div class="input-group ml-md-auto">
                            <div class="input-group-prepend">
                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="search-btn">标题</button>
                                <div class="dropdown-menu" style="">
                                    <a class="dropdown-item" href="#!" data-field="title">标题</a>
                                    <a class="dropdown-item" href="#!" data-field="cat_name">栏目</a>
                                </div>
                            </div>
                            <input type="text" class="form-control" name="keyword" placeholder="请输入名称">
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="user_table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/common_foot :: foot"></div>
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script>
    var TableInit = function () {
        var oTableInit = {};
        //初始化Table
        oTableInit.Init = function () {
            $('#user_table').bootstrapTable({
                locale: 'zh-CN',
                url: '/user/userList',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                async:  true,                        //true表示执行到这,ajax向后台发起访问,在等待响应的这段时间里,继续执行下面的代码
                                                     //设置为true,基本都是后面的代码(除非还有ajax)先执行
                // toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText:'<',              //上一页按钮样式
                paginationNextText:'>',             //下一页按钮样式
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                contentType: "application/x-www-form-urlencoded",   //重要选项,必填
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度,最好不要设置这个属性
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    {
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                        editable: {
                            mode: 'inline'
                        }
                    }, {

                        field: 'username',
                        align: 'center',
                        title: '用户名称'
                    }, {

                        field: 'password',
                        align: 'center',
                        title: '用户密码'
                    }
                ],
                rowStyle: function (row, index) {
                    var classesArr = ['success', 'info'];
                    var strclass = "";
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[0];
                    } else {//奇数行
                        strclass = classesArr[1];
                    }
                    return {classes: strclass};
                },//隔行变色
                responseHandler:function(res) {
                    return {
                        "total": res.data.length,//总页数
                        "rows": res.data   //数据
                    };
                }
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,    //params.limit,   页面大小
                offset: params.offset,
                testNum: 445,
                testNum1: 343
            };
            return temp;
        };
        return oTableInit;
    };
    var oTable = new TableInit();
    oTable.Init();
</script>
</body>
</html>